<template>
  <view class="setmenu">
    <view class=" _w-max _top _left _z-index-5 _pos-fixed _top _left"
      :style="{ 'background-color': 'rgba(255, 255, 255,' + srollOpacity + ')' }">
      <view :style="{ width: '100%', height: recHeight }"></view>
      <view class="felx_c h_96 f_s_18" style="position: relative;height: 96rpx;"
        :style="{ color: 'rgb(' + srollColor + ',' + srollColor + ',' + srollColor + ')' }">
        <view @click="back" style="position: absolute;left: 24rpx;top: 24rpx;" :style="{ filter: 'invert(' + 1 + ')' }">
          <image style="width: 48rpx;height: 48rpx;" :src="imgs.CHEVRO" mode="" />
          超值套餐
        </view>
      </view>
      <view id="top"></view>
    </view>
  </view>
</template>
<script>
import { getPackage } from '@/api/car.js'
const concat = name => 'https://taxi.raxan.xyz/wechat/static/images/hire/' + name

const IMAGES = {
  CHEVRO: 'https://taxi.raxan.xyz/wechat/static/images/store_detail/a-chevron-left.png',
  POI: 'https://taxi.raxan.xyz/wechat/static/images/iocn-poiadress.png',
  BANNER: concat('image.png')
}

export default {
  data() {
    return {
      scrollFilter: 1,
      recHeight: 0,
      srollOpacity: 0,
      srollColor: 0,
      imgs: IMAGES,
    }
  },
  onPageScroll(e) {
    this.scrollFilter = e.scrollTop < 100 ? 1 - Math.floor(e.scrollTop / 100) : 0;
    this.srollColor = e.scrollTop < 100 ?  Math.floor(e.scrollTop * 2.55) : 255;
    this.srollOpacity = e.scrollTop < 100 && e.scrollTop >= 20 ? '0.' + Math.floor(e.scrollTop) : e.scrollTop < 20 && e.scrollTop >= 0 ? '0.0' + Math.floor(e.scrollTop) : e.scrollTop;
  },
  onLoad(options) {
    this.getPhoneInfo()
    getPackage()
  },
  methods: {
    getPhoneInfo() {
      uni.getSystemInfo({
        success: (res) => {
          this.recHeightNum = res.statusBarHeight;
          this.recHeight = res.statusBarHeight + 'px'; //获取手机状态栏高度
        }
      });
    }
  }
}
</script>
<style lang="scss" scoped>

.f_s_18 {
  font-size: 36rpx;
}

.felx_c {
  display: flex;
  align-items: center;
  justify-content: center;
}

.setmenu {
  height: 200vh;
}

</style>